{% extends 'baseadmin.html' %}

{% block title %}模板1-封面-子页{% endblock %}

{% block styles %}
{{ super() }}
<!-- 本页所用的CSS -->
<link rel="stylesheet" href="/static/css/font.css">
<style> 

    /* 定义内容页面（画布）的固定宽高 570*760 */
    .cardcanvas {
        width: 570px;
        height: 760px;
        background-color: #f0f0f0;
        background-image: url("http://192.168.2.186:9000/static/images/mobwall/class1/0b155fc0c8404b0d8bdba53cbfd396ca~noop.webp");
        background-size: cover;
        margin: 0 auto;
    }
    .cardcanvas h1 {
        text-align: center;
        font-family: 'xinTiHeiBaoBeiDiZi';
        font-size: 3.5rem;
    }
    .cardcanvas h2 {
        text-align: center;
        font-family: 'xinTiHeiBaoBeiDiZi';
        font-size: 2.5rem;
    }
    .subpage {
        width: 570px;
        height: 760px;
        background-color: #f0f0f0;
        background-image: url("http://192.168.2.186:9000/static/images/mobwall/class1/1a3d4d8a73c845969514e1e429d6adc4~noop.webp");
        background-size: cover;
        margin: 0 auto;
    }
    .subpage h1 {
        text-align: center;
        font-family: 'xinTiHeiBaoBeiDiZi';
        font-size: 1.5rem;
    }
    .subpage h2 {
        text-align: center;
        font-family: 'xinTiHeiBaoBeiDiZi';
    }
    .subpage h3 {
        text-align: center;
        font-family: 'xinTiHeiBaoBeiDiZi';
    }
</style>
{% endblock %}

{% block maincontent %}
<!-- 本页主要内容, 主要采用bootstrap5.3 响应式布局 -->
<div class="container-lg">
    <div class="row">
        <div class="col-lg-2 border-end">
            <div class="card">
                <div class="card-header">
                    <h5>这是工具栏</h5>
                </div>
                <div class="card-body">
                    <ul class="list-group">
                        <li class="list-group-item"><a href="#">选择背景图</a></li>
                        <li class="list-group-item"><a href="#">背景音乐</a></li>
                    </ul>
                    <hr>
                    <button class="btn btn-primary" onclick="screen_element('cardcanvas')">截图</button>
                </div>
            </div>
        </div>
        <div class="col-lg-10">
            <div class="cardcanvas text-light border-1 p-3">
                <h1 class="mt-2">我想去看世界</h1>
                <h2>赶紧搞钱</h2>
                <ul>
                    <li>做小红书</li>
                    <li>做公众号</li>
                    <li>做头条</li>
                    <li>做抖音</li>
                    <li>引流</li>
                </ul>
            </div>
            <hr>
            <div class="subpage text-light border-1">
                <h1>做小红书</h1>
                <p class="mt-5">小红书内容</p>
            </div>
            <hr>
            <div class="subpage text-light border-1">
                <h2>做公众号</h2>
                <p class="mt-5">公众号内容</p>
            </div>
            <hr>
            。。。
        </div>

    </div>
    

</div>


{% endblock %}

{% block adminscripts %}
{{ super() }}
<script src="https://s4.zstatic.net/ajax/libs/html2canvas/1.4.1/html2canvas.min.js" integrity="sha512-BNaRQnYJYiPSqHHDb58B0yaPfCu+Wgds8Gp/gU33kqBtgNS4tSPHuGibyoeqMV/TJlSKda6FXzoEyYGjTe+vXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
    //Javascript 对元素截图功能, 输入元素的class，例如：‘cardcanvas’
    function screen_element(leclassname) {
        var element = document.querySelector('.'+leclassname);
        html2canvas(element).then(function(canvas) {
            document.body.appendChild(canvas);
        });
        
    }
</script>

<!-- 本页所用的JS -->
{% endblock %}